<template>
	<div>
		<div class="dingdan">
			<div class="title-color">
				<div class="left">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
				</div>
				<div class="qbdingdan">
					<p>全部订单</p>
				</div>
				<div class="bianji">
					<p>编辑</p>
				</div>
			</div>

		</div>
		<!--待,,,,-->
		<div class="dai">
			<div class="zhifu">
				<p class="active3">待支付</p>
			</div>
			<div class="fahuo">
				<p>待发货</p>
			</div>
			<div class="shouhuo">
				<p>待收货</p>
			</div>
			<div class="wancheng">
				<p>交易完成</p>
			</div>
		</div>
		<!--订单编号-->
		<div class="bianhao">
			<p class="ddbh">订单编号：1485269676465</p>
			<p class="success">交易完成</p>
		</div>
		<!--化妆品-->
		<div class="huazhuang">
			<div class="dabao">
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png" alt=""/>
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png" alt=""/>
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png" alt=""/>
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/dabao.png" alt=""/>
			</div>
		</div>
		<div class="xinde">
			<p class="shifu">实付:</p>
			<p class="score">¥166.66</p>
			<div class="fbxd">
				<p>发表心得</p>
			</div>
	</div>
	</div>
</template>
<script>
	export default {
		components: {
			
			},
		methods: {
			dingdan: function() {
				$(".dai p").click(function(){
					$(this).addClass("active3").parent().siblings().find("p").removeClass("active3");
				});
				$(".wancheng p").click(function(){
					$(".success").css("color","red");
				});
				$(".zhifu p,.fahuo p,.shouhuo p").click(function(){
					$(".success").css("color","#333333");
				});
			}
		},
		mounted:function(){
			this.dingdan();
		}
	}
</script>

<style>
	#app {
		overflow: hidden;
	}
	
	.dingdan {
		width: 100%;
		height: 9.6rem;
		background: #e53e42;
	}
	
	.title-color {
		width: 95%;
		display: flex;
		margin-left: 2rem;
		justify-content: space-between;
	}
	
	.left {
		margin-top: 3rem;
	}
	
	.left img {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.qbdingdan {
		margin-top: 3rem;
	}
	
	.qbdingdan p {
		width: 14.6rem;
		height: 3.5rem;
		font-size: 3.6rem;
		color: white;
	}
	
	.bianji {
		margin-top: 3.2rem;
	}
	
	.bianji p {
		width: 6.1rem;
		font-size: 3rem;
		color: white;
	}
	
	.dai {
		width: 100%;
		height: 8rem;
		border: 0.1rem solid darkgray;
		display: flex;
		justify-content: space-around;
	}
	
	.zhifu,
	.fahuo,
	.shouhuo,
	.wancheng {
		width: 12rem;
		height: 8rem;
		font-size: 3rem;
	}
	
	.zhifu p,
	.fahuo p,
	.shouhuo p,
	.wancheng p {
		line-height: 8rem;
	}
	
	.active3 {
		color: red;
		border-bottom: 0.1rem solid red;
	}
	.bianhao{
		width: 100%;
		height: 6rem;
		border-bottom: 0.1rem solid darkgray;
	}
	.ddbh{
		font-size: 2.8rem;
		float: left;
		line-height: 6rem;
		margin-left: 2rem;
	}
	.success{
		font-size: 2.8rem;
		float: right;
		line-height: 6rem;
		margin-right: 2rem;
	}
	.dabao{
		width: 100%;
		height: 20rem;
		border-bottom:0.1rem solid darkgray ;
		display: flex;
		justify-content: space-around;
	}
	.dabao img{
		width: 8.6rem;
		height: 10rem;
		padding-top: 5rem;
	}
	.xinde{
		width: 100%;
		height: 8.8rem;
		border-bottom: 0.1rem solid gainsboro;
	}
	.shifu{
		float: left;
		margin-left: 2rem;
		font-size:2.6rem;
		line-height: 8.8rem;
	}
	.score{
		float: left;
		font-size:2.6rem;
		color: red;
		line-height: 8.8rem;
		}
		.fbxd{
			width: 12rem;
			height: 4rem;
			background: red;
			border-radius: 1.5rem;
			float: right;
			margin-top: 2.4rem;
			margin-right: 2rem;
		}
		.fbxd p{
			color: white;
			font-size: 2.6rem;
			font-weight: 800;
		}
</style>